import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Button, Form, Input, Select, Spin, InputNumber, DatePicker, Row, Col} from 'antd';
import {messages} from "share/common";
import config from "config";
import moment from 'moment';
import Selector from 'components/selector'

const Option = Select.Option;
const FormItem = Form.Item;

@Form.create()
class VoyageForm extends Component {
  constructor(props) {
    super(props);
    let la = this.props.language.code === 'zh_cn' ? 'zh_cn' : 'en';
    this.state = {
      airportItem: {
        url: `${config.baseUrl}/location-service/api/airport/search/keyword?size=20`,
        label: value => {
          return `${value.cityName} ${value.cityCode} | ${value.airportName} ${value.airportCode}`;
        },
        key: 'airportCode',
        searchKey: 'keyword',
      },
      airlineItem: {
        url: `${config.baseUrl}/location-service/api/airline/search/keyword?size=20`,
        label: value => {
          return `${value.name} ${value.code}`;
        },
        key: 'code',
        searchKey: 'keyword',
      },
    }
    this.value = '';
  }

  componentDidMount() {
    this.props.onRef(this, this.props.voyageIndex);
  }

  onCheckParams = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        const {departureAirportName, arrivalAirportName, airlineName, stopAirportName} = values;
        this.value = {
          "segmentNo": this.props.voyageIndex + 1, // 航段号
          "departureDate": values.departureDate.format('YYYY-MM-DD HH:mm:ss'), // 出发日期
          "departureCityCode": departureAirportName.cityCode, // 出发城市code
          "departureCityName": departureAirportName.cityName, // 出发城市名称
          "departureAirportCode": departureAirportName.airportCode, // 出发机场code
          "departureAirportName": departureAirportName.airportName, // 出发机场名称
          "departureTerminal": values.departureTerminal, // 出发航站楼
          "arrivalDate": values.arrivalDate.format('YYYY-MM-DD HH:mm:ss'), // 到达日期，同上
          "arrivalCityCode": arrivalAirportName.cityCode, //
          "arrivalCityName": arrivalAirportName.cityName, //
          "arrivalAirportCode": arrivalAirportName.airportCode, //
          "arrivalAirportName": arrivalAirportName.airportName, //
          "arrivalTerminal": values.arrivalTerminal, //
          "cabinClassCode": values.cabinClassCode, // 舱等code
          "discount": values.discount, // 折扣
          "flightNo": values.flightNo, // 航班号
          "airlineCode": airlineName.code, // 航司code
          "airlineName": airlineName.name, // 航司名称
          "stopAirportName": stopAirportName.airportName, // 经停机场名称
          "stopAirportCityCode": stopAirportName.cityCode, // 经停机场城市code
          "stopAirportCityName": stopAirportName.cityName // 经停机场城市名称
        }
        this.onChange();
      } else {
        this.value = '';
        this.onChange();
      }
    })
  }

  onChange = () => {
    const {onChange} = this.props;
    onChange && onChange(this.value);
  }

  render() {
    const {value, isDetail} = this.props;
    const {airportItem, airlineItem} = this.state;
    const {getFieldDecorator} = this.props.form;
    const formLayout = {
      labelCol: {span: 24},
      wrapperCol: {span: 24}
    }
    const span = 12;
    let rules = [{
      required: true,
      message: messages('supplier.key612')/*必填*/
    }]
    let rowH = {}
    return (
      <div>
        <Form layout='vertical'>
          <Row style={rowH}>
            <Col span={span} style={{paddingRight: 20}}>
              <FormItem label={messages('supplier.key380')/*出发机场*/} {...formLayout}>
                {
                  getFieldDecorator('departureAirportName', {
                    initialValue: isDetail ? value.departureAirportName : '',
                    rules
                  })(
                    <Selector
                      disabled={isDetail}
                      selectorItem={airportItem}
                      entity
                    />
                  )
                }
              </FormItem>
            </Col>
            <Col span={span} style={{paddingLeft: 20}}>
              <FormItem label={messages('supplier.key387')/*到达机场*/}>
                {
                  getFieldDecorator('arrivalAirportName', {
                    initialValue: isDetail ? value.arrivalAirportName : '',
                    rules
                  })(
                    <Selector
                      disabled={isDetail}
                      selectorItem={airportItem}
                      entity
                    />
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row style={rowH}>
            <Col span={span} style={{paddingRight: 20}}>
              <FormItem label={messages('supplier.key1049')/*出发航站楼*/} {...formLayout}>
                {
                  getFieldDecorator('departureTerminal', {
                    initialValue: isDetail ? value.departureTerminal : ''
                  })(<Input disabled={isDetail}/>)
                }
              </FormItem>
            </Col>
            <Col span={span} style={{paddingLeft: 20}}>
              <FormItem label={messages('supplier.key1050')/*到达航站楼*/}>
                {
                  getFieldDecorator('arrivalTerminal', {
                    initialValue: isDetail ? value.arrivalTerminal : ''
                  })(<Input disabled={isDetail}/>)
                }
              </FormItem>
            </Col>
          </Row>
          <Row style={rowH}>
            <Col span={span} style={{paddingRight: 20}}>
              <FormItem label={messages('supplier.key1051')/*航司名称*/}>
                {
                  getFieldDecorator('airlineName', {
                    initialValue: isDetail ? value.airlineName : '',
                    rules
                  })(
                    <Selector
                      disabled={isDetail}
                      selectorItem={airlineItem}
                      entity
                    />
                  )
                }
              </FormItem>
            </Col>
            <Col span={span} style={{paddingLeft: 20}}>
              <FormItem label={messages('supplier.key1052')/*起飞日期*/}>
                {
                  getFieldDecorator('departureDate', {
                    initialValue: isDetail ? moment(value.departureDate) : null,
                    rules
                  })(
                    <DatePicker style={{width: '58%'}} showTime format='YYYY-MM-DD HH:mm:ss' disabled={isDetail}/>
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row style={rowH}>
            <Col span={span} style={{paddingRight: 20}}>
              <FormItem label={messages('supplier.key624')/*舱等*/}>
                {
                  getFieldDecorator('cabinClassCode', {
                    initialValue: isDetail ? value.cabinClassCode : null,
                    rules
                  })(
                    <Select>
                      <Option value={"Y"}>{messages('supplier.key814')/*经济舱*/}</Option>
                      <Option value={"C"}>{messages('supplier.key812')/*公务舱*/}</Option>
                      <Option value={"F"}>{messages('supplier.key813')/*头等舱*/}</Option>
                    </Select>
                  )
                }
              </FormItem>
            </Col>
            <Col span={span} style={{paddingLeft: 20}}>
              <FormItem label={messages('supplier.key1053')/*到达日期*/}>
                {
                  getFieldDecorator('arrivalDate', {
                    initialValue: isDetail ? moment(value.arrivalDate) : null,
                    rules
                  })(
                    <DatePicker style={{width: '58%'}} showTime format='YYYY-MM-DD HH:mm:ss' disabled={isDetail}/>
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row style={rowH}>
            <Col span={span} style={{paddingRight: 20}}>
              <FormItem label={messages('supplier.key372')/*航班号*/}>
                {
                  getFieldDecorator('flightNo', {
                    initialValue: isDetail ? value.flightNo : '',
                    rules
                  })(
                    <Input disabled={isDetail}/>
                  )
                }
              </FormItem>
            </Col>
            <Col span={span} style={{paddingLeft: 20}}>
              <FormItem label={messages('supplier.key396')/*经停机场*/}>
                {
                  getFieldDecorator('stopAirportName', {
                    initialValue: isDetail ? value.stopAirportName : '',
                  })(
                    <Selector
                      disabled={isDetail}
                      selectorItem={airportItem}
                      entity
                    />
                  )
                }
              </FormItem>
            </Col>
          </Row>
          <Row style={rowH}>
            <Col span={span} style={{paddingRight: 20}}>
              <FormItem label={messages('supplier.key966')/*折扣*/}>
                {
                  getFieldDecorator('discount', {
                    initialValue: isDetail ? value.discount : ''
                  })(
                    <InputNumber disabled={isDetail} precision={1} min={0} style={{width: '100%'}}/>
                  )
                }
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    language: state.main.language,
  }
}

export default connect(mapStateToProps)(VoyageForm);
